<!DOCTYPE html>
<html lang="en">
<head>
<title>神龙教主</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
    <h1>{{time}}</h1>
    <h1>{{time | dateFormat1}}</h1>
    <h1>{{time | dateFormat2}}</h1>
    <h1>{{time | dateFormat2('/')}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 需求1：模型定义time: new Date  视图h1展示
// 需求2：通过dateFormat1过滤    固定格式：年-月-日
// 需求2：通过dateFormat2过滤    动态格式：年-月-日  或 年/月/日

Vue.filter('dateFormat1', (dateData) => { // 默认有一个形参就是要过滤的数据
    // console.log(data)
    // return 'dasfadsf'
    return dateData.getFullYear() + 
    '-' + (dateData.getMonth()+1) +
    '-' + dateData.getDate()
})

Vue.filter('dateFormat2', (dateData, fuhao = '-') => { // 默认有一个形参就是要过滤的数据
    // console.log(data)
    // return 'dasfadsf'
    return dateData.getFullYear() + 
    fuhao + (dateData.getMonth()+1) +
    fuhao + dateData.getDate()
})

let vm = new Vue({
    el: '#app',
    data: {
        time: new Date
    }
})
</script>
</body>
</html>